<template>
	<div class="content">
		<div class="main">
			<!-- 新增隶属科室dialog -->
			<el-dialog title="编辑隶属科室" v-dialogDrag :visible.sync="addKsDialogFormVisible" width="28%" :modal="false" :before-close="handleAddClose">
				<el-divider></el-divider>
				<!-- tabs -->
				<div class="tabs">
					<div class="tabsMain" style="padding: 12px;">
						<!-- 表单 -->
						<el-form ref="form" :model="addKsForm" label-width="120px" size="mini" v-loading="loading">
							<el-row :gutter="20">
							  <el-col :span="v.spanRows" type="flex" v-for="(v,i) in formType" :key="i">
								  <!-- select -->
								  <el-form-item v-if="v.type == 'select'" :label="v.label" :prop="v.modelValue">
									<span slot="label"> {{ v.label }} <span v-if="v.im == true" style="color: brown;">*</span></span>
									<el-select v-model="$data.addKsForm[v.modelValue]" @focus="sname(v,i)" @change="scname" placeholder="请选择">
									    <el-option v-for="(item,index) in $data[v.op]" :key="index" :label="item.label" :value="item"> 
											<template>
												<span slot="label">{{ item.label }}</span>
												<span style="float: center; color: #8492a6; font-size: 12px">{{ item.label }}</span>
											</template>
										</el-option>
									</el-select>
								  </el-form-item>
							  </el-col>
							</el-row>
						</el-form>
					</div>
				</div>
			  <div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="addNewKs">添加</el-button>
				<el-button size="mini" @click="cancel">取消</el-button>
			  </div>
			</el-dialog>
		</div>
		<div class="feet">
			
		</div>
	</div>
</template>

<script>
	// selfs / sons
	// 接口
	import { findAttribute } from "@/api/user.js";
	export default {
		components: {
			
		},
		data() {
			return {
				idx:'',
				loading:false,
				addKsDialogFormVisible:false,
				// title右侧按钮
				headerBtn:[{ add:"add", title:"", type:"text", icon:"el-icon-plus" },{ adit:"adit", title:"", type:"text", icon:"el-icon-edit" }, { del:"del", title:"", type:"text", icon:"el-icon-delete" }],
				tableData:[],
				deptOption:[],
				formType:[
					{ id:0, label:'隶属科室：',spanRows:24,type:'select',modelValue:'deptName',prefix:'el-icon-require',im:true,placeholder:'',op:'deptOption' },
					{ id:1, label:'主要科室：',spanRows:24,type:'select',modelValue:'mainDep',prefix:'el-icon-require',im:false,placeholder:'',op:'statusOptions' },
				],
				statusOptions:[{id:1,label:'是',value:'是'},{id:2,label:'否',value:'否'}],
				tableRowsI:[{ name:"员工属性", prop:"id", type:"" }],
				tableRows:[{ name:"科室名称", prop:"id", type:"" },{ name:"主要科室", prop:"coding", type:"" },{ name:"院区序号", prop:"drugName", type:"" }],
				// obj
				addKsForm:{
					deptName:'',
					deptId:'',
					mainDep:'是',
					// specialtyName:'',
				},
				
			}
		},
		methods: {
			// 数据源
			loadData(){
				
			},
			
			//  select聚焦
			async sname(v,i) {
				console.log(v,i);
				// v.id = i;
				this.idx = i;
				// i event
				switch (i) {
					case 0:
					//  模糊搜索接口select函数
						let res = await findAttribute()
						this.deptOption = res.data.map(v=>{
							return { id:v.id,label: v.deptName,value: v.deptName,specialtyName:v.specialtyName,remark:v.remark}
						})
						console.log(this.deptOption)
					break;
				}
			},
			scname(v){
				this.addKsForm.deptId = v.id
				this.addKsForm.deptName = v.label
				console.log(this.addKsForm);
			},
			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑 打开隶属科室model
						console.log('0')
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
					case 2:
						// 处理索引2的逻辑 => 新增
						console.log('2')
						break;
				}
			},
			// 新增提交
			addNewKs(){
				console.log(this.addKsForm);
				// 设置一个定时器 用于传递成功后清空原数据源
				this.loading = true;
				this.disabled = true;
				setTimeout(() => {
					this.$emit('addksData',this.addKsForm)
					this.loading = false;
					this.disabled = false;
					this.addKsDialogFormVisible = false;
					// this.$refs['form'].resetFields();
				}, 1500)
			},
			// 打开addKsDialogFormVisible Model
			OpenaddKsDialogFormVisible(){
				this.addKsDialogFormVisible = true;
			},
			cancel(){
				this.addKsDialogFormVisible = false;
			},
			// 关闭
			handleAddClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					  this.$refs['form'].resetFields();
					  done();
					// this.formdisabled = true;
					// location.reload();
					// done();
				  })
				  .catch(_ => {
					this.formdisabled = this.formdisabled;
				  });
			},
		},

		//生命周期
		created() {
			
		},

	}
</script>

<style lang="less" scoped>
.content{
	height: 100%;
	width: 100%;
	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #007bb0;
		padding: 4px;
	}
	.main{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.mainOne{
			flex: 1;
			height: 50%;
			border: 1px solid #007bb0;
			
		}
		.mainTwo{
			flex: 1;
			height: 50%;
			margin-top: 12px;
			border: 1px solid #007bb0;
		}
	}
}
</style>